<template>
  <div>
    <FieldNumber
      v-if="config.type === 'number'"
      v-model="value2"
      :name="config.name"
      :label="config.label"
      :placeholder="config.placeholder"
      :rules="config.rules"
    />

    <div v-else-if="config.type === 'integer'">
      <FieldNumber
        v-model="value2"
        :name="config.name"
        type="digit"
        :label="config.label"
        :placeholder="config.placeholder"
        :rules="config.rules"
      />
    </div>
    <!--  -->

    <div v-else-if="config.type === 'date'">
      <FieldDatetime
        v-model="value2"
        type="date"
        :min-date="config.min_date"
        :max-date="config.max_date"
        :name="config.name"
        :label="config.label"
        :placeholder="config.placeholder"
        :rules="config.rules"
      />
    </div>

    <div v-else-if="config.type === 'text'">
      <van-field
        v-model="value2"
        :name="config.name"
        autosize
        type="textarea"
        :label="config.label"
        :placeholder="config.placeholder"
        :rules="config.rules"
        @input="val => onInput(val, config)"
      />
    </div>

    <div v-else-if="config.type === 'boolean'">
      <van-field :label="config.label" :name="config.name">
        <template #input>
          <van-switch v-model="value2" size="20" />
        </template>
      </van-field>
    </div>

    <div v-else-if="['many2one', 'selection'].includes(config.type)">
      <FieldPicker
        v-if="config.popupselected"
        v-model="value2"
        :name="config.name"
        :label="config.label"
        :options="getOptions(config)"
        type="popup"
        @change="val => onInput(val, config)"
      />

      <van-field v-else :name="config.name" :label="config.label">
        <template #input>
          <van-radio-group
            v-model="value2"
            direction="horizontal"
            @change="onChangeRadio"
          >
            <van-radio
              v-for="op in getOptions(config)"
              :key="op.value"
              :name="op.value"
              @click="onClickRadio"
            >
              {{ op.text }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>

    <div v-else-if="['one2many', 'many2many'].includes(config.type)">
      <div v-if="config.selected">
        <van-field :name="config.name" :label="config.label">
          <template #input>
            <van-checkbox-group v-model="value2" direction="horizontal">
              <van-checkbox
                v-for="op in getOptions(config)"
                :key="op.value"
                :name="op.value"
                shape="square"
              >
                {{ op.text }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>

        <!-- <FieldCheckBox
          v-model="value2"
          :name="config.name"
          :label="config.label"
          :options="getOptions(config)"
          type="popup"
        /> -->
      </div>
      <div v-else>
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            :title="config.label"
            name="1"
            :value="oldValue[`${config.name}__count`]"
          >
            <van-field :name="config.name">
              <template #input>
                <FormO2m
                  v-model="value2"
                  :data="oldValue[`${config.name}__objects`]"
                  :config="config"
                />
              </template>
            </van-field>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>

    <van-field
      v-else
      v-model="value2"
      :name="config.name"
      :label="config.label"
      :placeholder="config.placeholder"
      :rules="config.rules"
    />
  </div>
</template>

<script>
import FieldNumber from '@/components/Field/FieldNumber'
import FieldPicker from '@/components/Field/FieldPicker'
import FieldDatetime from '@/components/Field/FieldDatetime'

// import FieldCheckBox from '@/components/Field/FieldCheckBox'

export default {
  name: 'FieldInput',
  components: {
    FieldNumber,
    FieldPicker,
    FieldDatetime
    // , FieldCheckBox
  },
  props: {
    value: { type: undefined, default: undefined },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    newValue: {
      type: Object,
      default: () => {
        return {}
      }
    },
    oldValue: {
      type: Object,
      default: () => {
        return {}
      }
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      activeName: '1',
      radioChangeTime: new Date()
    }
  },
  computed: {
    value2: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  async created() {
    //
  },

  async mounted() {
    // console.log('FieldInput, config,', this.config.name, this.config)
    // console.log('FormO2m, value,', this.value)
    // console.log('FormO2m, data,', this.data)
  },

  methods: {
    onInput(val, config) {
      console.log('onInput FiledInput,', val, config)
      this.$emit('change', val, config)
    },

    onChangeRadio(name) {
      // console.log('onChangeRadio,', name)
      this.radioChangeTime = new Date()
    },
    onClickRadio(event) {
      const now = new Date()
      if (now - this.radioChangeTime > 100) {
        // console.log('onClickRadio unchange')
        this.value2 = null
      }
    },
    getOptions(fld) {
      // console.log('form getOptions, ', fld, this.options[fld.name])
      const old = this.options[fld.name] || []
      let newOps = []
      if (fld.filter) {
        newOps = fld.filter({
          record: this.oldValue,
          oldValue: this.oldValue,
          newValue: this.newValue,
          options: old
        })
      } else {
        newOps = old
      }

      if (fld.type === 'selection') {
        return newOps.map(item => {
          const selection = fld.selection || {}
          const text = selection[item.value] || item.text
          const label = text
          return { ...item, text, label }
        })
      } else {
        return newOps
      }
    }
  }
}
</script>

<style type="text/css"></style>
